<template>
  <div class="sound-control" :class="{ 'is-muted': isMuted }">
    <button 
      class="sound-button" 
      @click="toggleMute"
      :aria-label="isMuted ? '开启音效' : '关闭音效'"
      :title="isMuted ? '开启音效' : '关闭音效'"
    >
      <span class="icon" v-if="isMuted">🔇</span>
      <span class="icon" v-else>🔊</span>
    </button>
    
    <!-- 测试面板（仅在开发模式下显示） -->
    <div class="sound-test-panel" v-if="showTestPanel">
      <div class="panel-header">
        <h3>音效测试</h3>
        <button class="close-button" @click="showTestPanel = false">×</button>
      </div>
      <div class="panel-body">
        <div class="test-button-group">
          <button 
            v-for="sound in availableSounds" 
            :key="sound.name"
            class="test-button"
            @click="playSound(sound.name)"
          >
            {{ sound.icon }} {{ sound.label }}
          </button>
        </div>
        <div class="status-info">
          <p>音效状态: <span :class="statusClass">{{ statusText }}</span></p>
          <p>已加载: {{ loadedSounds }}/{{ totalSounds }}</p>
        </div>
      </div>
    </div>
    
    <!-- 开发模式下显示测试面板按钮 -->
    <button 
      v-if="isDev" 
      class="test-panel-toggle"
      @click="showTestPanel = !showTestPanel"
      title="测试音效"
    >
      🎵
    </button>
  </div>
</template>

<script>
import soundManager from '@/utils/SoundManager';

export default {
  name: 'SoundControl',
  data() {
    return {
      showTestPanel: false,
      isDev: process.env.NODE_ENV === 'development',
      availableSounds: [
        { name: 'click', label: '点击音效', icon: '🖱️' },
        { name: 'whoosh', label: '滑动音效', icon: '💨' },
        { name: 'drumroll', label: '鼓点音效', icon: '🥁' },
        { name: 'reveal', label: '揭晓音效', icon: '✨' },
        { name: 'applause', label: '掌声音效', icon: '👏' },
        { name: 'epic', label: '史诗音效', icon: '🏆' }
      ],
      loadedSounds: 0,
      totalSounds: 0
    };
  },
  computed: {
    isMuted() {
      return soundManager.isMuted();
    },
    statusClass() {
      if (soundManager.fallbackMode) return 'status-error';
      if (this.isMuted) return 'status-warning';
      return 'status-ok';
    },
    statusText() {
      if (soundManager.fallbackMode) return '错误(音效无法加载)';
      if (this.isMuted) return '已静音';
      return '正常';
    }
  },
  mounted() {
    // 确保音效系统已初始化
    soundManager.init();
    
    // 监听音效加载状态
    this.checkSoundLoadingStatus();
    
    // 测试音效在点击其他位置时播放
    document.addEventListener('click', this.playClickSound);
  },
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener('click', this.playClickSound);
  },
  methods: {
    toggleMute() {
      const newState = soundManager.toggleMute();
      
      // 播放切换音效反馈（如果不是静音状态）
      if (!newState) {
        soundManager.play('click');
      }
    },
    playSound(name) {
      soundManager.play(name);
    },
    playClickSound(event) {
      // 忽略控制按钮本身的点击
      if (event.target.closest('.sound-control')) return;
      
      // 忽略链接和按钮的点击
      if (event.target.tagName === 'A' || event.target.tagName === 'BUTTON') return;
      
      // 播放点击音效
      soundManager.play('click');
    },
    checkSoundLoadingStatus() {
      if (soundManager.loadingStatus) {
        this.loadedSounds = soundManager.loadingStatus.success;
        this.totalSounds = soundManager.loadingStatus.total;
      }
      
      // 每秒检查一次加载状态
      setTimeout(this.checkSoundLoadingStatus, 1000);
    }
  }
};
</script>

<style scoped>
.sound-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sound-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sound-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.sound-button .icon {
  font-size: 18px;
}

.is-muted .sound-button {
  background: #f0f0f0;
  color: #999;
}

.sound-test-panel {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 280px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #eee;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.close-button:hover {
  color: #333;
}

.panel-body {
  padding: 15px;
}

.test-button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 15px;
}

.test-button {
  padding: 8px 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f8f8;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.test-button:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

.status-info {
  font-size: 13px;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.status-info p {
  margin: 5px 0;
}

.status-ok {
  color: #22c55e;
  font-weight: bold;
}

.status-warning {
  color: #f59e0b;
  font-weight: bold;
}

.status-error {
  color: #ef4444;
  font-weight: bold;
}

.test-panel-toggle {
  margin-top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 14px;
}

.test-panel-toggle:hover {
  background: #e5e5e5;
}
</style> 